<template>
  <div class="layout-base" :style="{ 'background-image': 'url(' + dataInfo.backgroundImage + ')' }">
    <!--top-->
    <div class="top-padding">
      <dv-border-box-11 :title="dataInfo.largeScreenName" class="datav-border size-11"></dv-border-box-11>
    </div>

    <el-row class="flex-wrap p-sides15" :gutter="15">
      <!--中奖人员-->
      <el-col :xs="12" :sm="12" :lg="5" :xl="5" class="minAbsolute">
        <dv-border-box-8 class="dv-height winners-width" style="width: 100%;min-height: 770px;">
          <div class="flex-column default">
            <dv-decoration-11 class="fit-title">中奖人员({{winnerList.length}})</dv-decoration-11>
            <div class="scrollbar-height winners-content" id="scrollContainer" style="">
              <c-scroll :id="'service'" class="p-left10">
                <template>
                  <ul>
                    <li v-for="(i,idx) in winnerList" :key="idx + 'n'" class="winners flex-align-center">
                      <img :src="i.headSculpture" />
                      <div>{{i.nickname}}</div>
                    </li>
                  </ul>
                </template>
              </c-scroll>
            </div>
          </div>
        </dv-border-box-8>
      </el-col>

      <!--抽奖center-->
      <el-col :xs="24" :sm="24" :lg="13" :xl="13">
        <dv-border-box-8 class="dv-height dv-width" style="width: 100%;min-height: 770px;" v-if="isReloadData">
          <div class="lottery-title">大屏抽奖</div>
          <div class="flex-column">
            <div class="price-text" v-show="showRes && totalLottery == false && sltTxtList.headSculpture"><span>共计中奖1名</span></div>
            <!--抽奖环形地图-->
            <div class="sd-ball-box flex-column" v-if="joinList.length>0">
              <!--              @mousemove="mouseMove" @mouseover="active = true" @mouseout="active = false"-->
              <ul class="item-box"ref="item_box_ref" v-show="!showRes || totalLottery == true">
                <li v-for="(item, key) in joinList" :key="key" class="flex-column prize-list">
                  <div>{{item.nickname}}</div>
                  <img :src="item.headSculpture" />
                </li>
              </ul>

              <!-- 中奖头像展示 -->
              <div v-if="showRes && totalLottery == false" class="flex width100">
                <div class="handle-box flex-column" :id="outSet==1 ? 'mydiv' : ''" @click="outClick"  v-show="sltTxtList.headSculpture">
                  <div class="box"></div>
                  <img :src="sltTxtList.headSculpture" />
                  <span>{{sltTxtList.nickname}}</span>
                </div>
              </div>
            </div>
            <div class="lottery-hint default" v-show="!showRes && winnerList.length>0">即将开启下一轮</div>
            <div class="start-prize flex-column pointer" @click="getPrize">
              <img  :src="require('@/assets/largeScreenStrat.png')" :style="isGet?'filter: hue-rotate(90deg);':''"  />
              <div :class="isGet?'end-prize-text':'prize-text'">{{ isGet ? '结束'  :  '立即'}}抽奖</div>
            </div>
          </div>
        </dv-border-box-8>
      </el-col>
      <!--签到名单_right总-->
      <el-col :xs="12" :sm="12" :lg="6" :xl="6">
        <div class="dv-height default" style="width: 100%;min-height: 770px;">
          <!--签到名单-->
          <dv-border-box-8 class="sign-size" style="width: 100%;overflow: hidden;">
            <div class="flex-column">
              <dv-decoration-11 class="fit-title">签到名单</dv-decoration-11>
              <!--min-height,会造成不滚动，height会影响滚动-->
              <div class="sign-content" id="signScrollContainer"
                   style="min-height: 380px; height:calc(100vh - 650px);">
                <c-scroll :id="'signId'" class="p-left10">
                  <template>
                    <div class="flex-align-center flex-wrap">
                      <div v-for="(i,j) in joinList" :key="j" class="sign-in-list">
                        <div class="flex-column">
                          <img :src="i.headSculpture" />
                          <div>{{i.nickname}}</div>
                        </div>
                      </div>
                    </div>
                  </template>
                </c-scroll>
              </div>
            </div>
          </dv-border-box-8>
          <!--签到/中奖人数-->
          <div class="flex-align-center m-algin20">
            <!--签到人数-->
            <dv-border-box-8 style="width:100%;margin-right: 10px">
              <div class="flex-align-center padding15" >
                <i class="iconfont icon-qiandao-mianxing color2FF"></i>
                <div class="flex-columns num-class">
                  <span>签到人数</span>
                  <div>{{joinList.length}}</div>
                </div>
              </div>
            </dv-border-box-8>
            <!--中奖人数-->
            <dv-border-box-8 style="width:100%;">
              <div class="flex-align-center padding15" >
                <i class="iconfont icon-lingquren color2FF"></i>
                <div class="flex-columns num-class">
                  <span>中奖人数</span>
                  <div>{{winnerList.length}}</div>
                </div>
              </div>
            </dv-border-box-8>
          </div>
          <dv-border-box-8 style="width:100%;height: 203px">
            <div class="flex-align-center code-class" >
              <img :src="dataInfo.qrcode" />
              <div class="flex-end">
                {{dataInfo.releaseChannel==1 ? 'D音' : 'K手'}}扫一扫，立即参与
              </div>
            </div>
          </dv-border-box-8>
        </div>
      </el-col>
    </el-row>
    <!--bottom-->
    <div class="flex flex-wrap button-list" v-if="sponsors.length>0">
      <div v-for="(i,j) in sponsors" :key="j">
        <img :src="i.icon" />
      </div>
    </div>
    <div class="flex colorfff" style="padding-bottom: 5px" v-if="sponsors.length>0">各大合作伙伴定力支持赞助</div>
  </div>
</template>

<script>
  import { queryJoinNum,queryWinnerNum,lookScreenDetail,onlineLottery} from "@/api/explosiveCode/largeScreenLottery";
  import CScroll from "@/views/explosiveCode/mianBigScreen/components/c-scroll";
  import SignScroll from "@/views/explosiveCode/mianBigScreen/components/sign-scroll";
  let sa, ca, sb, cb, sc, cc, per;

  export default {
    inject:['reload'],  //注入依赖
    name: "index",
    components: {SignScroll, CScroll},
    data () {
      return {
        isReloadData: true,
        outSet:0,
        oldList:[],
        dataInfo:{}, // 大屏详情
        largeScreenId:0,
        winnerList:[], // 中奖人数list
        joinList:[], // 参与人数list

        cs:localStorage.getItem('isDatamonitor'),
        //start
        back:'https://z4a.net/images/2023/08/18/Group-263950b924336c666948.png',
        //end

        /*环形地球抽奖start*/

        listTxt: [], // 内容
        itemBox: null, // 元素盒子（盒子大小设置class)
        itemList: null, // 元素集合
        temSize: [], // 每个元素宽高集合
        radius: 200, // 旋转半径（旋转的大小）
        active: false, // 鼠标是否悬浮
        tspeed: 2, // 旋转速度
        mouseX: 0, // 坐标点x
        mouseY: 0, // 坐标点y
        mouseX_move: 1,
        mouseY_move: 1,
        distr: true, //
        timer: null,
        isStart: false, // 是否立即抽奖
        isInit: true, // 是否是初始化
        defaultTimer: null, // 默认自传
        showRes: false,
        sltNum: 1,  //中奖人数
        sltTxtList: [],
        isGet:false,
        isGetClick:false,  // 暂不需要
        /*end*/
        loadTimer:null,
        totalLottery:false,  //是否全部中奖
        sponsors:[],  // 赞助商list
      }
    },

    computed: {
    },
    // 路由刷新
    activated(){
      console.log("主页面大屏抽奖activated===========")
    },
    created() {
      // this.temSize=[]   // 新增修改，用户个数，如果不清空，在“所有元素随机排序，并重新计算位置”对不上则会报错——无效果
      document.addEventListener('visibilitychange', this.handleVisiable)
      console.log("created==========")
      // 获取加载传入的所有参数
      this.largeScreenId = this.$route.query.id  // 大屏id
      this.queryInit()
      // 存储剪辑工程ID到缓存
      // sessionStorage.setItem('largeScreenId', this.largeScreenId)// 存储 “大屏id”
      this.loadTimer = setInterval(() => {
        console.log('============================参与人数1111111111')
        this.queryJoinNums()
      },2000)
      // 查询大屏里面的中奖人数
      this.queryWinnerNums()
    },
    /* mounted () {
          console.log("mounted==========")
          document.addEventListener('visibilitychange', this.handleVisiable)
          // 获取加载传入的所有参数
          this.largeScreenId = this.$route.query.id  // 大屏id
          // 存储剪辑工程ID到缓存
          // sessionStorage.setItem('largeScreenId', this.largeScreenId)// 存储 “大屏id”
          this.queryInit()
          this.loadTimer = setInterval(() => {
            console.log('============================参与人数1111111111')
            this.queryJoinNums()
          },2000)
          // 查询大屏里面的中奖人数
          this.queryWinnerNums()

        },*/
    destroyed() {
      clearInterval(this.loadTimer);  // 销毁直接隐藏，然后再进判断（修改）
      console.log("destroyed==========")
      document.removeEventListener('visibilitychange', this.handleVisiable)
    },
    methods: {
      // 局部刷新
      reloadPart(){
        console.log('进入局部刷新=========')
        this.isReloadData = false
        this.$nextTick(()=>{
          this.isReloadData=true
          this.init();  // 地球环绕js加载
        })
      },
      csClick(){
      },
      handleVisiable(e) {
        console.log('e---------',e);
        if (e.target.hidden) {
          /*清除，查看签到名单接口*/
          clearInterval(this.loadTimer);
          this.loadTimer = null;
          console.log("页面不可见11111 要执行的方法")
          // 页面不可见 要执行的方法 例：
          // clearInterval(定时器);
        } else {
          console.log("页面可见 要执行的方法")
          this.loadTimer = setInterval(() => {
            console.log('调用了===========查询大屏里面的参与人数222222222222222222222222')
            this.queryJoinNums()
          },2000)
          // 页面可见 要执行的方法
        }
      },
      // 根据id查询详情及中奖签到
      queryInit(){
        // 根据id查询详情
        lookScreenDetail({
          id:this.largeScreenId
        })
          .then((data) => {
            this.dataInfo=data
            this.sponsors=data.sponsors
            console.log('根据id查询详情及中奖签到',data)
          })
          .catch((e) => {
            this.$message({
              showClose: true,
              message: e,
              type: 'error',
              customClass:'ele-danger-border'
            });
          });
      },
      // 查询大屏里面的参与人数
      queryJoinNums(){
        queryJoinNum({
          largeScreenId:this.largeScreenId
        })
          .then((data) => {
            this.joinList=data
            if(this.joinList.length>this.oldList.length && this.isStart!=true){
              console.log('进入大于===================',)
              // this.temSize=[]   // 新增修改，用户个数，如果不清空，在“所有元素随机排序，并重新计算位置”对不上则会报错__修改11
              console.log('进入this.init====111111进入大于-==================')
              this.init();  // 地球环绕js加载
              // this.csClick()
              this.oldList=data
            }
          })
          .catch((e) => {
            this.$message({
              showClose: true,
              message: e,
              type: 'error',
              customClass:'ele-danger-border'
            });
            // clearInterval(this.loadTimer);
          });
      },
      // 查询大屏里面的中奖人数
      queryWinnerNums(){
        queryWinnerNum({
          largeScreenId:this.largeScreenId
        })
          .then((data) => {
            this.winnerList=data
            console.log('查询中奖人数',data)
          })
          .catch((e) => {
            this.$message({
              showClose: true,
              message: e,
              type: 'error',
              customClass:'ele-danger-border'
            });
          });
      },

      /*自动滚动 start*/
      rowClick(row) {
        console.log(row, 'row ==================')
      },

      /*end*/
      outClick(){
        this.outSet=1
        setTimeout(()=>{
          this.outSet=0
          this.showRes=false
          // 修改start
          // this.temSize=[]   // 新增修改，用户个数，如果不清空，在“所有元素随机排序，并重新计算位置”对不上则会报错__修改11
          // this.reload()
          // this.reloadPart()  // 局部刷新
         /* if(this.defaultTimer){
            clearTimeout(this.defaultTimer);
            this.defaultTimer = null;
          }*/
          this.init()
          // clearTimeout( this.timer );

          //  修改end

        },2000)
        setTimeout(()=>{
            this.sltTxtList=[]  // 修改，需测试
        },3500)

        /* mydiv.style.transform= "translate(-600px, -250px)";  // 飞入最终坐标
         // ball.style.transform= "scaleX(-1)";
         mydiv.style.opacity= 0;  // 设置透明*/
      },
      /*环形地球抽奖start*/
      getPrize(){
        /*this.reload()
        return;*/
        if(this.joinList.length<=0){
          this.$message({
            showClose: true,
            message: '暂无抽奖用户！',
            type: 'error',
            customClass:'ele-danger-border'
          });
          // this.$message.error('暂无抽奖用户！')
          return;
        }
        console.log('this.isGet,this.isGetClick',this.isGet,this.isGetClick,'showRes',this.showRes)
        if(this.isGet){
          this.end()
        }
        else{
          this.start()
        }
        this.isGet=!this.isGet
      },
      start () {
        console.log("进入开始1111===========")
        this.showRes = false;
        if(this.isStart) return;
        // 立即抽奖时不启动默认旋转
        if(this.defaultTimer){
          clearTimeout(this.defaultTimer);
          this.defaultTimer = null;
        }
        // 一般是第一次初始化完成或自动旋转时
        if ( this.timer ) {
          this.isInit = false;
          this.isStart = true;
        } else {
          // 计算正/余弦
          this.sineCosine( 0, 0, 0 );
          console.log('进入所有元素随机排序，并重新计算位置3333333333')

          // 所有元素随机排序，并重新计算位置
          this.positionAll();
          this.timer = setInterval( this.rolling, 50 );
          this.isInit = false;
          this.isStart = true;
        }
      },
      end () {
        console.log("进入结束2222===========")
        if(!this.isStart) return;
        /* let tmpList = [], isStop = false,
           randomIndex = Math.floor((Math.random()*this.listTxt.length));
        while(!isStop){
          randomIndex = Math.floor((Math.random()*this.listTxt.length));
          if(!tmpList.includes(this.listTxt[randomIndex])){
            tmpList.push(this.listTxt[randomIndex])
          }
          isStop = tmpList.length == this.sltNum;
        }*/
        this.isStart = false;
        this.showRes = true;
        // console.log( '结束this.sltNum ',this.sltNum )
        // debugger
        // this.sltTxtList = tmpList;
        console.log('抽奖end=====',this.sltTxtList)
        // 抽奖
        onlineLottery({
          id:this.largeScreenId
        })
          .then((data) => {
            console.log('抽奖======',data)
            this.sltTxtList = data;  // 中奖人员信息
            this.totalLottery=false  // 是否用户全中奖
            // this.reloadPart()  // 局部刷新
            this.queryWinnerNums()
          })
          .catch((e) => {
            this.totalLottery=true
            console.log('进入this.init====2222222')
            // this.init();  // 地球环绕js加载
            // 初始化时，默认转动
            this.$message({
              showClose: true,
              message: e,
              type: 'error',
              customClass:'ele-danger-border'
            });
          });
      },
      // 计算正/余弦
      sineCosine ( a, b, c ) {
        let dtr = Math.PI / 180; // 弧度
        sa = Math.sin( a * dtr );
        ca = Math.cos( a * dtr );
        sb = Math.sin( b * dtr );
        cb = Math.cos( b * dtr );
        sc = Math.sin( c * dtr );
        cc = Math.cos( c * dtr );
      },
      // 所有元素随机排序，并重新计算位置
      positionAll () {
        console.log("进入所有元素随机排序，并重新计算位置9-15==========")
        var phi = 0, theta = 0, itemTmpSize = null;
        // 元素个数
        var max = this.temSize.length;
        console.log("this.temSize",this.temSize)
        // 元素临时存放，用于随机排序
        var itemTmpList = Array.from( this.itemList );
        // 文档片段
        var oFragment = document.createDocumentFragment();
        //随机排序
        itemTmpList.sort( () => {
          return Math.random() < 0.5 ? 1 : -1;
        } );
        // 遍历元素，逐个插入文档片段集合
        for ( let i = 0; i < itemTmpList.length; i++ ) {
          oFragment.appendChild( itemTmpList[i] );
        }
        // 把文档片段集合插入元素盒子尾部
        this.itemBox.appendChild( oFragment );
        // 循环遍历出每个元素的坐标 和 left top
        for ( let i = 1; i < max + 1; i++ ) {
          console.log("循环次数max,i",max,i)
          /*if(max>i){
            break
          }*/
          /*if(!this.itemList[i - 1].style){
            return
          }*/
          phi = Math.acos( -1 + ( 2 * i - 1 ) / max );
          theta = Math.sqrt( max * Math.PI ) * phi;

          // 坐标变换
          itemTmpSize = this.temSize[i - 1];
          itemTmpSize.cx = this.radius * Math.cos( theta ) * Math.sin( phi );
          itemTmpSize.cy = this.radius * Math.sin( theta ) * Math.sin( phi );
          itemTmpSize.cz = this.radius * Math.cos( phi );
          // 开始报错
          console.log("开始报错this.this.queryJoinNums()",this.itemList,'this.itemList[i - 1].style',this.itemList[i - 1].style,'this.itemBox', this.itemBox,'itemTmpSize',itemTmpSize)
          this.itemList[i - 1].style.left = itemTmpSize.cx + this.itemBox.offsetWidth / 2 - itemTmpSize.offsetWidth / 2 + 'px';
          this.itemList[i - 1].style.top = itemTmpSize.cy + this.itemBox.offsetHeight / 2 - itemTmpSize.offsetHeight / 2 + 'px';
          this.itemList[i - 1].style.color = '#f5b16d';
          if(Math.random() > .5){
            this.itemList[i - 1].style.color = '#ff6060';
          }
        }
      },
      // 鼠标在元素移动事件, 计算出鼠标最后消失的位置
      // 解开注释可实现跟随商标方向滚动
      mouseMove ( ev ) {
        let oEvent = window.event || ev;

        this.mouseX = oEvent.clientX - ( this.itemBox.offsetLeft + this.itemBox.offsetWidth / 2 );
        this.mouseY = oEvent.clientY - ( this.itemBox.offsetTop + this.itemBox.offsetHeight / 2 );

        this.mouseX /= 5;
        this.mouseY /= 5;
      },
      // 滚动
      // 解开注释可实现跟随商标方向滚动
      rolling () {
        let a, b, c = 0, size = 200, howElliptical = 1;
        // debugger
        // 只有初始化时才可以使用鼠标控制，即抽奖时不可以
        if ( this.active && !this.isStart ) {
          a = ( -Math.min( Math.max( -this.mouseY, -size ), size ) / this.radius ) * this.tspeed;
          b = ( Math.min( Math.max( -this.mouseX, -size ), size ) / this.radius ) * this.tspeed;
        }
        // 首次加载时默认滚动
        else if ( this.isInit ) {
          a = this.mouseX_move * ( 1 ); // 小于 1 会慢慢停止
          b = this.mouseY_move * ( 1 ); // 小于 1 会慢慢停止
        }
        // 立即抽奖
        else if ( !this.isInit && this.isStart ) {
          a = this.mouseX_move * ( 1.10 );
          b = this.mouseY_move * ( 1.25 );
        }
        // 结束抽奖
        else if ( !this.isStart ) {
          clearInterval( this.timer );
          this.timer = null;
          // return;  //——修改 因为后面的操作导致一致循环
          // 10s 后自动恢复至初始化状态即默认自动旋转——修改为3秒
          this.defaultTimer = setTimeout( () => {
            // 计算正/余弦
            this.sineCosine( 1, 0, 0 );
            console.log('进入所有元素随机排序，并重新计算位置1111111111')
            // 所有元素随机排序，并重新计算位置
            this.positionAll();
            this.isInit = true;
            this.isStart = false;
            this.timer = setInterval( this.rolling, 50 );
            clearTimeout(this.defaultTimer);
            // clearInterval( this.timer );  // 修改

            this.defaultTimer = null;
          }, 3000 );
        }
        this.mouseX_move = a || 1;
        this.mouseY_move = b || 1;
        if ( Math.abs( a ) <= 0.01 && Math.abs( b ) <= 0.01 ) {
          clearInterval( this.timer );
          this.timer = null;
          return;
        }
        // 重新计算正/余弦
        this.sineCosine( a, b, c );
        for ( let j = 0; j < this.temSize.length; j++ ) {
          let rx1 = this.temSize[j].cx,
            ry1 = this.temSize[j].cy * ca + this.temSize[j].cz * ( -sa ),
            rz1 = this.temSize[j].cy * sa + this.temSize[j].cz * ca;

          let rx2 = rx1 * cb + rz1 * sb,
            ry2 = ry1,
            rz2 = rx1 * ( -sb ) + rz1 * cb;

          let rx3 = rx2 * cc + ry2 * ( -sc ),
            ry3 = rx2 * sc + ry2 * cc,
            rz3 = rz2;

          this.temSize[j].cx = rx3;
          this.temSize[j].cy = ry3;
          this.temSize[j].cz = rz3;

          // 计算透视距离
          per = 330 / ( 330 + rz3 );

          this.temSize[j].x = ( howElliptical * rx3 * per ) - ( howElliptical * 2 );
          this.temSize[j].y = ry3 * per;
          this.temSize[j].scale = per;
          this.temSize[j].alpha = per;
          this.temSize[j].alpha = ( this.temSize[j].alpha - .6 ) * ( 10 / 6 );
        }

        this.doPosition();
        this.depthSort();
      },
      // 转动时重新计算定位
      doPosition () {
        let lf = this.itemBox.offsetWidth / 2, tp = this.itemBox.offsetHeight / 2, itemListTmp = null;
        for ( let i = 0; i < this.temSize.length; i++ ) {
          itemListTmp = this.itemList[i];

          itemListTmp.style.left = this.temSize[i].cx + lf - this.temSize[i].offsetWidth / 2 + 'px';
          itemListTmp.style.top = this.temSize[i].cy + tp - this.temSize[i].offsetHeight / 2 + 'px';
          itemListTmp.style.fontSize = Math.ceil( 12 * this.temSize[i].scale / 2 ) + 8 + 'px';
          itemListTmp.style.filter = "alpha(opacity=" + 100 * this.temSize[i].alpha + ")";
          itemListTmp.style.opacity = this.temSize[i].alpha;
        }
      },
      // 转动时重新计算 zIndex
      depthSort () {
        let aTmp = [];
        for ( let i = 0; i < this.itemList.length; i++ ) {
          aTmp.push( this.itemList[i] );
        }

        aTmp.sort( ( vItem1, vItem2 ) => {
          if ( vItem1.cz > vItem2.cz ) {
            return -1;
          }
          else if ( vItem1.cz < vItem2.cz ) {
            return 1;
          }
          else {
            return 0;
          }
        } );

        for ( let i = 0; i < aTmp.length; i++ ) {
          aTmp[i].style.zIndex = i;
        }
      },

      init () {
        let that = this;
        if ( that.timer ) {
          clearTimeout( that.timer );
          that.timer = null;
        }

        that.itemBox = [];
        that.temSize = [];
        that.itemList = [];

        // setTimeout( _ => {
          Promise.resolve().then( res => {
            that.listTxt = ['AAA', 'BBB', 'CCC', 'DDDD', 'EEE', 'FFF'];
            initFn();
            /*
            setTimeout( _ => {
              that.listTxt = that.listTxt.concat( ['GGG', 'HHH', 'III', 'JJJ', 'KKK'] );
              initFn()
            }, 1000 )

            setTimeout( _ => {
              that.listTxt = that.listTxt.concat( ['MMM', 'LLL', 'NNN', 'OOO', 'PPP'] );
              initFn()
            }, 2000 )

            setTimeout( _ => {
              that.listTxt = that.listTxt.concat( ['QQQ', 'RRR', 'SSS', 'TTT', 'UUU'] );
              initFn()
            }, 3000 )

            setTimeout( _ => {
              that.listTxt = that.listTxt.concat( ['VVVV', 'WWW', 'XXX', 'YYYY', 'ZZZ'] );
              initFn()
            }, 4000 )*/
          } )
        // }, 1000 )

        function initFn () {
          if ( that.timer ) {
            clearTimeout( that.timer );
            that.timer = null;
          }

          that.itemBox = [];
          that.temSize = [];
          that.itemList = [];

          that.$nextTick( _ => {
            // 遍历时获得当前项
            let oTag = null;
            // 获取 包裹所有元素的 盒子
            that.itemBox = that.$refs.item_box_ref;
            // 获取 盒子里所有 元素
            that.itemList = that.itemBox.getElementsByTagName( 'li' );
            for ( let i = 0; i < that.itemList.length; i++ ) {
              oTag = {};
              oTag.offsetWidth = that.itemList[i].offsetWidth;
              oTag.offsetHeight = that.itemList[i].offsetHeight;
              that.temSize.push( oTag );
            }
            // 计算正/余弦
            that.sineCosine( 0, 0, 0 );
            // 所有元素随机排序，并重新计算位置
            that.positionAll();
            // 初始化时，默认转动
            if ( that.timer ) {
              clearTimeout( that.timer );
              that.timer = null;
              that.timer = setInterval( that.rolling, 50 );
            } else
              that.timer = setInterval( that.rolling, 50 );
          } )
        }
      },
      init2 () {
        this.$nextTick( _ => {
          // 遍历时获得当前项
          let oTag = null;
          // 获取 包裹所有元素的 盒子
          this.itemBox = this.$refs.item_box_ref;
          // 获取 盒子里所有 元素
          this.itemList = this.itemBox.getElementsByTagName( 'li' );
          console.log('this.itemBox',this.itemBox,' this.itemList', this.itemList)
          // 修改start
          /*this.isInit= true // 是否是初始化
          this.tspeed= 2 // 旋转速度
          this.temSize=[]   // 新增修改，用户个数，如果不清空，在“所有元素随机排序，并重新计算位置”对不上则会报错*/
          // end
          /*if(!this.isStart){
            this.temSize=[]   // 新增修改，用户个数，如果不清空，在“所有元素随机排序，并重新计算位置”对不上则会报错
          }*/
          for ( let i = 0; i < this.itemList.length; i++ ) {
            oTag = {};
            oTag.offsetWidth = this.itemList[i].offsetWidth;
            oTag.offsetHeight = this.itemList[i].offsetHeight;
            console.log('oTag',oTag)
            this.temSize.push( oTag );
          }
          // 计算正/余弦
          this.sineCosine( 0, 0, 0 );
          console.log('进入所有元素随机排序，并重新计算位置222222222')

          // 所有元素随机排序，并重新计算位置
          this.positionAll();
          // 初始化时，默认转动
          this.timer = setInterval( this.rolling, 50 );
        } )
      }
      /*环形地球抽奖end*/
    }
  }
</script>

<style lang="scss" scoped>

  @keyframes flip {
    from {
      transform: rotateY(0deg);
      left: 0;
      top: 0;
      opacity:1;
    }
    to {
      transform: rotateY(180deg);
      left: -640px;
      top: -220px;
      opacity:0;
    }
  }

  #mydiv {
    /*width: 100px;
    height: 100px;
    background-color: red;*/
    position: relative;
    animation-name: flip;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
  }



  .box,
  .box::after,
  .box::before {
    border: 2px solid #0AE2FF;
    border-left: 2px solid rgba(255, 255, 255, 0);
    border-right: 2px solid rgba(255, 255, 255, 0);
    /*border: 2px solid #ffe446;
    border-left: 2px solid #8113ee;
    border-right: 2px solid #8113ee;*/
    border-radius: 50%;
  }
  .box::after,
  .box::before {
    position: absolute;
    content: '';
    left: 50%;
    top: 50%;
  }
  .box {
    width: 300px;
    height: 300px;
    position: relative;
    animation: turn 1s linear infinite;
    transform-origin: 50% 50%;
  }
  .box::before {
    width: 280px;
    height: 280px;
    margin-top: -140px;
    margin-left: -140px;
    animation: turn2 1.25s linear infinite;
  }
  .box::after {
    width: 260px;
    height: 260px;
    margin-top: -130px;
    margin-left: -130px;
    animation: turn 1.5s linear infinite;
  }
  @keyframes turn {
    100% {
      transform: rotateZ(-1turn);
    }
  }
  @keyframes turn2 {
    100% {
      transform: rotateZ(1turn);
    }
  }

  /*  .box {
      width: 200px;
      height: 200px;
      position: relative;
    }
    .box::before {
      width: 180px;
      height: 180px;
      margin-top: -90px;
      margin-left: -90px;
    }
    .box::after {
      width: 160px;
      height: 160px;
      margin-top: -80px;
      margin-left: -80px;
    }*/

  /* 中奖名单头像，翻转*/
  #ball{
    /*width: 10px;
    height: 10px;*/
    border-radius: 50%;
    /*transform: rotateX(0deg);
    animation: rotation 5s linear infinite;*/
    /* 水平镜像翻转 */
    /*animation: fadenum 5s;*/
    /*animation-iteration-count: 5;*/
    /* 翻转 */
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    /*兼容IE*/
    filter:FlipH;


    /*animation: yellow-orange 1.5s infinite;*/
    transition: all 1s linear;
  }
  @keyframes ball {
    0% {
      opacity: 1;
    }


    100% {
      opacity: 0;
    }
  }

  .layout-base {
    /*background-image: url('@/assets/largeScreenBj.png');*/
    /*width: 100%;*/
    /*height: 100%;*/
    min-height: 100vh;
    letter-space: -1rem;
    /*width: 100vw;
    height: 100vh;*/
    background-repeat: no-repeat;
    background-size: cover;
    /*顶部标题*/
    .top-padding{
      padding: 20px 0 30px;
      .size-11{
        width:100%;
        height:50px;
      }
    }
    .fit-title{
      width:180px;
      height:50px;
      color: #fff
    }
    /*中奖人员*/
    .winners-width{
      /*width:380px;*/
      .winners-content{
        width: 99%;
        padding: 14px 10px;
      }
    }
  }
  .dv-height{
    height:calc(100vh - 200px); // 中奖人员/签到名单等高度，需减底部高度，100px为‘在线抽奖大屏’高度
  }
  /* 签到名单 */
  .sign-size{
    min-height: 445px;
    height:calc(100vh - 525px);
    /*width:450px;*/
    .sign-content{
      width: 100%;
      /*min-height: 234px;*/
      padding: 14px 10px;
      /*  签到名单 */
      .sign-in-list{
        width: calc(100% / 4);
        padding-bottom: 20px;
        img{
          border-radius: 50%;
          width: 35px;
          margin-bottom: 10px;
        }
        div{
          text-align: center;
          width: 100%;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          color: #fff;
          font-size: 15px;
        }
      }
    }
  }
  .scrollbar-height{
    height:calc(100vh - 200px - 80px);
    min-height: 690px;
  }
  .dv-width{
    /*margin: 0 25px;*/
    /*width:calc(100vw - 910px);*/
  }
  .lottery-title{
    font-size: 20px;
    color: #fff;
    padding:10px 17px 10px;
    /*margin: 10px 17px 0;
    padding-bottom: 10px;*/
    border-bottom: 1px solid #115299;
  }
  /*共计中奖*/
  .price-text {
    margin: 20px;
    padding: 5px 40px;
    /* 背景 中间实，二边虚 */
    background: linear-gradient(
        to right,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 10%,
        rgba(173, 112, 9, 0.3) 20%,
        rgba(173, 97, 32, 0.4) 30%,
        rgba(173, 84, 43, 0.5) 40%,
        rgba(173, 65, 47, 0.8) 50%,
        rgba(173, 84, 43, 0.5) 60%,
        rgba(173, 97, 32, 0.4) 70%,
        rgba(173, 112, 9, 0.3) 80%,
        rgba(0,0,0,0) 90%,
        rgba(0,0,0,0) 100%);
    /*background: linear-gradient(to left,  #fff 0%,  #b2e58b 100%,  #fff 0%);*/
    display: inline-block;
    /*文字上下渐变*/
    span{
      font-size: 15px;
      font-weight: bold;
      background: linear-gradient(to bottom, #fff, #ad412f); /* 背景颜色上下渐变 */
      -webkit-background-clip: text; /* 将背景剪裁到文本上 */
      -webkit-text-fill-color: transparent; /* 文本颜色默认为透明 */
      animation: gradient 5s ease infinite; /* 设置渐变动画 */
    }
  }
  .lottery-hint{
    font-size: 16px;
    color: #fff;
  }
  /*立即抽奖*/
  .start-prize{
    z-index: 999;
    position: absolute;
    bottom: 3px;
    img{
      width: 260px;
    }
    img:hover{
      filter: hue-rotate(30deg);
    }
    .prize-text{
      position: absolute;
      bottom: 8px;
      color: #FFFFFF;
      font-size: 20px;
      font-weight: bold;
      background: linear-gradient(to bottom, #82fbfc, #418ba9); /* 背景颜色上下渐变 */
      -webkit-background-clip: text; /* 将背景剪裁到文本上 */
      -webkit-text-fill-color: transparent; /* 文本颜色默认为透明 */
      animation: gradient 5s ease infinite; /* 设置渐变动画 */
    }
    .end-prize-text{
      position: absolute;
      bottom: 8px;
      color: #FFFFFF;
      font-size: 20px;
      font-weight: bold;
      background: linear-gradient(to bottom, #ce9bce, #d256e2); /* 背景颜色上下渐变 */
      -webkit-background-clip: text; /* 将背景剪裁到文本上 */
      -webkit-text-fill-color: transparent; /* 文本颜色默认为透明 */
      animation: gradient 5s ease infinite; /* 设置渐变动画 */
    }
  }

  @keyframes gradient {
    0% {
      background-position: 0% 50%; /* 背景渐变位置从50%开始 */
    }
    100% {
      background-position: 100% 50%; /* 背景渐变位置到50%结束 */
    }
  }

  /*  中奖人员，框内样式*/
  .winners{
    width: 80%;
    padding:3px;
    border-radius: 100px;
    margin:0 15px 15px;
    background: linear-gradient(to left, rgba(255, 0, 0, 0) 0%, rgba(0, 192, 255, 0.4) 100%);
    img{
      border-radius: 50%;
      width: 35px;
    }
    div{
      width: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      margin-left: 10px;
      color: #fff;
      font-size: 15px;
    }
  }
  /*底部赞助商样式*/
  .button-list{
    height: 48px;
    margin: 10px 30px ;
    img{
      height: 48px;
      margin-right: 20px;
    }
    div{
      color: #fff;
      font-size: 15px;
    }
  }
  /*右，签到/中奖人数*/
  .num-class{
    color: #fff;
    padding-left: 20px;
    span{
      font-size: 15px;
    }
    div{
      padding-top: 4px;
      font-size: 24px;
    }
  }
  /*右，二维码扫一扫样式*/
  .code-class{
    padding: 15px;
    img{
      width: 173px;
      height: 173px;
      margin-right: 10px;
    }
    div{
      color: #fff;
      font-size: 18px;
    }
  }
  /*  环形抽奖地图 class*/

  .sd-ball-box {
    width: 400px;
    height: 350px;
    /*width: 650px;
    height: 600px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /*margin: 60px auto ;*/
    margin: 110px auto  70px ;
    .prize-list{
      div{
        color: #fff;
        font-size: 12px;
        padding-bottom: 5px;
      }
      img{
        border-radius: 50%;
        width: 22px;
      }
    }

    .item-box {
      width: 400px;
      height: 350px;
      display: flex;
      justify-content: center;
      align-items: center;
      /*width: 650px;
      height: 600px;
      background: #000;*/
      list-style: none;
      position: relative;
      li {
        position: absolute;
        top: 50%;
        left: 50%;
        padding: 3px 6px;
        // transition: all .1s;
        transform: translate(-10%, -10%);
        font-family: Microsoft YaHei;
        font-weight: bold;
        // color: #f5b16d; // #84a4fd #f7bd82
      }
    }
    .handle-box {
      display: flex;
      justify-content: center;
      align-items: center;
      /* position: absolute;
       left: 97px;
       top: 58px;
       display: flex;*/
      flex-direction: column;
      z-index: 99;
      /*animation:handle 5s linear infinite;*/
      img{
        width: 250px;
        height: 250px;
        position: absolute;
        top:26px;
        border-radius: 50%;
      }
      span{
        width: 300px;
        text-align: center;
        display: inline-block;
        padding-top: 15px;
        font-size: 26px;
        // font-weight: bold;
        color: #fff;
        text-shadow:#000 5px 3px 5px;
      }
    }

    @keyframes handle{
      0% {
        opacity:1;
      }


      100% {
        opacity:0;
        transform:translate(-1000px, 100px);
      }
    }

  }

  /*“中奖人员” 屏幕宽度小于1169，则至于底部和“签到名单”并列*/
  @media screen and (max-width: 1169px) {
    .minAbsolute {
      position: absolute;
      bottom: 0px;
      right: 14px;
    }
    .layout-base{
      height: 100%;
    }
  }





</style>
